<%--
  Created by IntelliJ IDEA.
  User: yue
  Date: 2016/9/8
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%@ include file="top.jsp" %>

    <title>角色管理</title>
    <script type="text/javascript">
        jQuery(function () {

            $('form[name="edit1"] input[name="areaName"]').validatebox({
                required: true,
                validType: 'length[2,30]',
                missingMessage: '请输入区域名',
                invalidMessage : '区域名长度为2-30 位'
            });

            //搜索框初始化
            $('form[name="search"] #param_cityName').combobox({
                mode: 'remote',
                //editable :       false,
                invalidMessage: '请选择城市',
                panelHeight: 'auto',
                url: 'cityAction!getCityName',
                method: 'post',
                valueField: 'cityName',
                textField: 'cityName'
            });

            //新增城市
            jQuery("#add_div").dialog({
                width: 300,
                height: 170,
                algin: 'center',
                title: '新增城市',
                modal: true,
                closed: true,
                href: 'cityAction!addPage',
                iconCls: 'icon-user_add',
                buttons: [
                    {
                        id: 'button_1', text: '提交', iconCls: 'icon-add-new', handler: function () {
                        jQuery('#button_1').linkbutton('disable');
                        if ($('#add').form('validate')) {
                            $.ajax({
                                url: 'cityAction!addCity',
                                type: 'post',
                                dataType: 'json',
                                data: $('#add').serialize(),
                                beforeSend: function () {
                                    $.messager.progress({text: '正在新增中...'});
                                },
                                success: function (jsonData, response, status) {
                                    jQuery('#button_1').linkbutton('enable');
                                    $.messager.progress('close');
                                    $('#add_div').dialog('close');
                                    var flag = jsonData.flag;
                                    var errorMsg = jsonData.msg;
                                    if (flag == true) {
                                        jQuery("#grid_div").datagrid("reload");
                                        $('#add').form('reset');
                                        $('#add_div').dialog('close');
                                        jQuery.messager.confirm("继续添加", errorMsg, function (r) {
                                            if (r) {
                                                $('#add_div').dialog('open');
                                            } else {
                                                jQuery("#grid_div").datagrid("reload");
                                            }
                                        });
                                    } else {
                                        $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                        jQuery("#grid_div").datagrid("reload");
                                    }
                                }
                            });
                        }else{
                            jQuery('#button_1').linkbutton('enable');
                        }
                    }
                    }, {
                        text: '取消', iconCls: 'icon-redo', handler: function () {
                            $('#add').form('reset');
                            $('#add_div').dialog('close');
                        }
                    }]
            });

            //修改城市
            jQuery("#edit").dialog({
                width: 300,
                height: 225,
                algin: 'center',
                title: '修改城市',
                modal: true,
                closed: true,
                iconCls: 'icon-edit',
                buttons: [
                    {
                        id: 'button_1', text: '提交', iconCls: 'icon-edit-new', handler: function () {
                        jQuery('#button_1').linkbutton('disable');
                        if ($('#edit').form('validate')) {
                            $.ajax({
                                url: 'cityAction!editCity',
                                type: 'post',
                                dataType: 'json',
                                data: $('#edit1').serialize(),
                                beforeSend: function () {
                                    $.messager.progress({text: '正在修改中...'});
                                },
                                success: function (jsonData, response, status) {
                                    $.messager.progress('close');
                                    $('#edit').dialog('close');
                                    var flag = jsonData.flag;
                                    var errorMsg = jsonData.msg;
                                    jQuery('#button_1').linkbutton('enable');
                                    if (flag == true) {
                                        jQuery("#grid_div").datagrid("reload");
                                        $('#edit').dialog('close');
                                        jQuery.messager.confirm("确认修改", errorMsg, function (r) {
                                            if (!r) {
                                                $('#edit').dialog('open');
                                            } else {
                                                jQuery("#grid_div").datagrid("reload");
                                            }
                                        });
                                    } else {
                                        $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                        jQuery("#grid_div").datagrid("reload");
                                    }
                                }
                            });
                        }else{
                            jQuery('#button_1').linkbutton('enable');
                        }
                    }
                    }, {
                        text: '取消', iconCls: 'icon-redo', handler: function () {
                            $('#edit').dialog('close')
                            $("#edit1").form('reset');
                        }
                    }]
            });


            //数据显示
            jQuery('#grid_div').datagrid({
                url: 'cityAction!listGrid',
                fit: true,
                fitColumns: true,
                striped: true,
                loadMsg: "加载数据",
                rownumbers: true,
                border: false,
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 15, 20, 25],
                pageNumber: 1,
                sortName: 'createTime',
                sortOrder: 'asc',
                toolbar: '#grid_tool',
                remoteSort: true,
                frozenColumns: [[                                //锁列
                    {field: "ck", checkbox: true, width: 30},
                    {field: "cityId", title: "城市ID", width: 50}
                ]],
                columns: [[
                    {field: "cityName", title: "城市名称", width: 150, align: "left", halign: "center", sortable: true},
                    {field: "landmarks", title: "主要区域", width: 150, align: "left", halign: "center", sortable: true},
                    {field: "areaName", title: "所属区域", width: 150, align: "left", halign: "center", sortable: true},
                    {field: "createUser", title: "创建人员", width: 150, align: "left", halign: "center", sortable: true},
                    {
                        field: "createTime", title: "创建时间", width: 150, align: "left", halign: "center", sortable: true,
                        formatter: function (value, row, index) {
                            //格式化当前时间
                            var unixTimestamp = new Date(value);
                            return unixTimestamp.toLocaleString();
                        }
                    },

                ]],
                //操作事件
                onRowContextMenu: function (e, rowIndex, rowData) {
                    e.preventDefault();
                    $('#right_click').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });

            //按钮事件
            grid_tool = {
                //刷新
                reload: function () {
                    jQuery('#grid_div').datagrid('reload');
                },
                //撤销
                redo: function () {
                    $('#grid_div').datagrid('unselectAll');
                    $('#search').form('clear');

                },
                //添加
                add: function () {
                    $('#add_div').dialog('open');
                    $('input[name="cityName"]').focus();
                },
                //搜索
                search: function () {
                    var param_areaName = jQuery("#param_areaName").val();
                    var param_cityName = jQuery("#param_cityName").combobox('getValue');
                    var param_createUser = jQuery("#param_createUser").val();

                    var paramObj = {
                        "param_areaName": param_areaName,
                        "param_createUser": param_createUser,
                        "param_cityName":param_cityName
                    };
                    jQuery("#grid_div").datagrid({
                        queryParams: paramObj
                    });
                },
                //删除
                remove: function () {
                    var selectArray = $('#grid_div').datagrid('getSelections');
                    if (selectArray == null || selectArray.length == 0) {
                        $.messager.alert("操作提示", "你还还未选中记录，不能执行删除操作", "warning");
                    } else {
                        $.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {
                            if (flag) {
                                var ids = [];
                                for (var i = 0; i < selectArray.length; i++) {
                                    ids.push(selectArray[i].cityId);
                                }
                                jQuery.ajax({
                                    type: 'POST',
                                    url: 'cityAction!deleteCityById',
                                    data: {
                                        ids: ids.join(',')
                                    },
                                    dataType: 'json',
                                    success: function (jsonData) {
                                        var flag = jsonData.flag;
                                        var errorMsg = jsonData.msg;
                                        if (flag == true) {
                                            jQuery("#grid_div").datagrid("reload");
                                            $.messager.show({title: '提示', msg: errorMsg, timeout: 2000});
                                        } else {
                                            $('#grid_div').datagrid('unselectAll');
                                            $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                            jQuery("#grid_div").datagrid("reload");
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                //编辑
                edit: function () {
                    var selectArray = $('#grid_div').datagrid('getSelections');
                    if (selectArray.length > 1) {
                        $.messager.alert('警告操作！', '编辑记录只能选定一条数据！', 'warning');
                    } else if (selectArray.length == 1) {

                        $.ajax({
                            url: 'cityAction!getCityById',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                cityId: selectArray[0].cityId
                            },
                            beforeSend: function () {
                                $.messager.progress({text: '正在获取中...'});
                            },
                            success: function (jsonData, response, status) {
                                $.messager.progress('close');
                                var flag = jsonData.flag;
                                var msg = jsonData.msg;

                                $('form[name="edit1"] #cityName').combobox({
                                    mode: 'remote',
                                    required: true,
                                    //editable :       false,
                                    invalidMessage: '请选择城市',
                                    panelHeight: 'auto',
                                    url: 'cityAction!getAllCityName',
                                    method: 'post',
                                    valueField: 'name',
                                    textField: 'name'
                                });
                                if (flag) {
                                    $('#edit').form('load', {
                                        cityId: msg.cityId,
                                        createUser: msg.createUser,
                                        landmarks:msg.landmarks,
                                        areaName: msg.areaName,
                                        cityName: msg.cityName,
                                        createTime: msg.createTime.toString()
                                    }).dialog('open');

                                } else {
                                    $.messager.alert("操作提示", "操作失败，原因 = " + msg, "warning");
                                }
                            }
                        });
                    } else if (selectArray.length == 0) {
                        $.messager.alert('警告操作！', '编辑记录至少选定一条数据！', 'warning');
                    }
                }
            };
        })
    </script>
</head>
<body>
<div id="right_click" class="easyui-menu" style="width:120px;display:none;">
    <div iconCls="icon-add-new" onclick="grid_tool.add();">添加</div>
    <div iconCls="icon-edit-new" onclick="grid_tool.edit();">修改</div>
    <div iconCls="icon-delete-new" onclick="grid_tool.remove();">删除</div>
    <div iconCls="icon-reload" onclick="grid_tool.reload();">刷新</div>
    <div iconCls="icon-cancel" onclick="grid_tool.redo();">取消选择</div>
</div>
<div id="grid_tool" style="padding:5px;">
    <div style="margin-bottom:5px;">
        <a class="easyui-linkbutton" iconCls="icon-add-new" plain="true" onclick="grid_tool.add();">添加</a>
        <a class="easyui-linkbutton" iconCls="icon-edit-new" plain="true" onclick="grid_tool.edit();">修改</a>
        <a class="easyui-linkbutton" iconCls="icon-delete-new" plain="true" onclick="grid_tool.remove();">删除</a>
        <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="grid_tool.reload();">刷新</a>
        <a class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="grid_tool.redo();">取消选择</a>
    </div>
    <div style="padding:0 0 0 7px;color:#333;">
        <form id="search" name="search">
            <p>
                地区名称：<input type="text" class="textbox" name="param_areaName" id="param_areaName" style="width:110px">
                创建人员：<input type="text" class="textbox" name="param_createUser" id="param_createUser" style="width:110px">
                所在城市: <input type="text" class="easyui-combobox" name="param_cityName" id="param_cityName" value=""/></td>
                <a class="easyui-linkbutton" iconCls="icon-search" onclick="grid_tool.search();">查询</a>
            </p>
        </form>
    </div>
</div>
<div id="grid_div"></div>
<div id="add_div"></div>
<div id="edit">
    <form id="edit1" name="edit1" style="margin:0;padding:5px 0 0 20px;color:#333;">
        <table border="0">
            <input type="hidden" class="textbox" name="cityId" id="cityId" value=""/>
            <tr>
                <td>所在城市</td>
                <td><input type="text" class="easyui-combobox" name="cityName" id="cityName" value=""/></td>
            </tr>
            <tr>
                <td>主要地标</td>
                <td><input type="text" class="textbox" name="landmarks" id="landmarks" value=""/></td>
            </tr>
            <tr>
                <td>区域名称</td>
                <td><input type="text" class="textbox" name="areaName" id="areaName" value=""/></td>
            </tr>
            <tr>
                <td>创建人</td>
                <td><input type="text" class="textbox" readonly name="createUser" id="createUser" value=""/></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input type="text" class="easyui-datetimebox" name="createTime" id="createTime" title="创建时间" readonly/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog_div"></div>
</body>
</html>

